import 'package:Bible/global.dart';
import 'package:Bible/http/api.dart';
import 'package:flutter/material.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final String id;
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  @override
  void initState() {
    String _id = widget.id;
    getBibleDetail(_id).then((res) {
      setState(() {
        _data = res;
      });
    });
    super.initState();
  }

  List<Widget> renderParagraphs() {
    List<Widget> list = [];
    for (var i = 0; i < _data['paragraphs'].length; i++) {
      var item = _data['paragraphs'][i];
      list.add(SizedBox(height: 5));
      list.add(
        Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                item['title'],
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 14,
                  color: Global.fontColor,
                ),
              ),
              SizedBox(height: 4),
              Text(
                item['content'][0],
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 14,
                  fontFamily: 'fangzhengkai',
                  color: Global.primaryColor,
                ),
              ),
              SizedBox(height: 4),
              Text(
                item['content'][1],
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 14,
                  fontFamily: 'fangzhengkai',
                  color: Global.fontSecondColor,
                ),
              ),
            ],
          ),
        ),
      );
      list.add(SizedBox(height: 25));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(
                  child: CircularProgressIndicator(
                      backgroundColor: Global.primaryColor)),
            ),
          )
        : Scaffold(
            body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            padding: EdgeInsets.fromLTRB(20, 5, 20, 5),
            decoration: BoxDecoration(
              color: Global.backgroundColor,
            ),
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(height: Global.paddingTop + 5),
                  Text(
                    _data['title'],
                    style: TextStyle(
                      fontWeight: FontWeight.w600,
                      fontSize: 17,
                      color: Global.fontColor,
                    ),
                  ),
                  SizedBox(height: 15),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: renderParagraphs(),
                  ),
                  SizedBox(height: 15),
                ],
              ),
            ),
          ));
  }
}
